<script setup lang="ts">
import { bingDevice } from '@/api/class';
import { getDeviceInfoList } from '@/api/device';
import type { DeviceInfo } from '@/api/device/type';
import type { Result } from '@/utils/request';
import { ElMessage } from 'element-plus';
import { onMounted, ref, type Ref } from 'vue';
const classId = defineModel("classId") as Ref<string>;
const dialogVisible = defineModel() as Ref<boolean>;
const deviceList = ref([] as DeviceInfo[]);
const options = ref([] as {value: string, label: string}[]);
const select = ref('');
onMounted(() => {
    init();
})

const init = () => {
    getDeviceInfoList().then((res) => {
        deviceList.value = res.data;
        options.value = deviceList.value.map((item, index) => {
            return {value: item.id, label: item.name};
        })
    })
}

const onSubmit = () => {
    bingDevice(classId.value, select.value).then((res) => {
        const {msg} = res as Result;
        ElMessage({
            message: msg,
            type: 'success'
        })
    })
}
</script>

<template>
    <div>
        <el-dialog v-model="dialogVisible" title="绑定设备" width="500">
            <div>
                <el-select v-model="select" placeholder="Select"
                    size="large" style="width: 240px"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">提交</el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>

</style>